<template>
  <div class="mod-home">
    <el-row>
      <el-col :span="24" class="box">
        <el-card>
          <div>
            <div class="grid-content bg-purple">
              <img src="~@/assets/img/icon --1.png" alt="" class="img1" />
              <p class="txt1">
                当前待审核单据总数（个）：<span>{{ waitenum }}</span>
              </p>
              <ul class="sale">
                <li>
                  销售订单<span>{{ salenum }}</span>
                </li>
                <li>
                  销货单<span>{{ salesnum }}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" class="box">
        <el-card>
          <h3>收款预警</h3>
          <div class="grid-content1 bg-purple">
            <img src="~@/assets/img/icon --2.png" alt="" />
            <ul>
              <li>
                <em>即将到期</em><span>3</span>个
                <p>总金额<i>￥3000.00</i></p>
              </li>
              <li>
                <em>到期</em><span>0</span>个
                <p>总金额<i>￥300.00</i></p>
              </li>
              <li>
                <em>逾期</em><span>3</span>个
                <p>总金额<i>￥1200.00</i></p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="box box1">
        <el-card>
          <h3>付款预警</h3>
          <div class="grid-content1 bg-purple">
            <img src="~@/assets/img/icon --3.png" alt="" />
            <ul>
              <li>
                <em>即将到期</em><span>3</span>个
                <p>总金额<i>￥3000.00</i></p>
              </li>
              <li>
                <em>到期</em><span>0</span>个
                <p>总金额<i>￥300.00</i></p>
              </li>
              <li>
                <em>逾期</em><span>3</span>个
                <p>总金额<i>￥1200.00</i></p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" class="box box2">
        <el-card>
          <h3>库存预警</h3>
          <div class="wrap">
            <div class="sbox">
              <h4>
                <img src="~@/assets/img/low-icon .png" alt="" />
                最低预警存货个数
              </h4>
              <p class="h5">4</p>
              <p>短缺总量</p>
              <p class="num">120.00</p>
            </div>
            <div class="sbox sbox1">
              <h4>
                <img src="~@/assets/img/high.png" alt="" />
                最低预警存货个数
              </h4>
              <p class="h5">4</p>
              <p>短缺总量</p>
              <p class="num">120.00</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="box box3">
        <el-card>
          <h3>信用超期预警</h3>
          <div class="grid-content2">
            <ul>
              <li>
                <i>1</i>
                <p>超期预警</p>
              </li>
              <li>
                <i>2</i>
                <p>涉及单据数</p>
              </li>
              <li class="price">
                <i>￥2500.00</i>
                <p>涉及金额</p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      orderPickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      salePickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
      orderChartLine: {},
      saleChartLine: {},
      orderSummery: {
        today_sale_amount: 0.0,
        last7_day_amount: 194638.0,
        today_order_num: 0,
        last_day_amount: 0.0,
      },
      waitenum: 6,
      salenum: 21,
      salesnum: 6,
    };
  },
  // mounted() {
  //   this.initData();
  // },
  methods: {
    addProduct() {
      this.$router.push("/product-spuadd");
    },
    orderList() {
      this.$router.push("/order-order");
    },
    userList() {
      this.$router.push("/member-member");
    },

    initOrderSummery() {
      this.$http({
        url: this.$http.adornUrl("/order/order/summery"),
        method: "get",
      })
        .then(({ data }) => {
          this.orderSummery = data.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style>
.mod-home {
  /* line-height: 1.5; */
}
.aaa_2 {
  /* display: flex; */
  flex-direction: column;
  margin-left: 20px;
}
.aaa {
  display: flex;
  flex-direction: column;
  margin-left: 80px;
}
.bg-purple {
  /* background: #d3dce6; */
  display: flex;
  /* width: 390px; */
  height: 85px;
  align-items: center;
  padding-left: 40px;
}
/* .bg-purple-light {
    background: #e5e9f2;
  } */
.grid-content {
  /* border-radius: 4px; */
  min-height: 36px;
  height: 160px;
}

.grid-content1 {
  /* border-radius: 4px; */
  min-height: 36px;
  height: 100%;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.min_title {
  width: 100%;
  height: 40px;
  background-color: #eef0f1;
}
.tt_lf {
  margin-left: 40px;
}
.min_content {
  height: auto;
  float: left;
}

.grid-content1 {
  min-height: 150px;
}
.row-bg1 {
  padding: 10px 0;
  background-color: #000;
}
.chart-box {
  min-height: 400px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.box {
  margin: 0 1%;
  display: flex;
}

.el-col-6 {
  width: 23%;
}
.el-card__body {
  margin: 10px auto;
}
.el-card {
  width: 100%;
}

.el-row {
  padding: 10px;
}
.el-col-24 {
  width: 98%;
}

.bbb {
  width: 12.5%;
  float: left;
}
.ccc {
  width: 8%;
  float: left;

  margin: -180px 50px 0px 0px;
}
.right_line {
  border-left: 1px solid #ebeef5;
}
.el-col-11 {
  width: 47.83333%;
}
.compare {
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #cccccc;
  text-align: left;
}
.number1 {
  font-family: "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  color: #666666;
  text-align: left;
}

.title1 {
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #989898;
  text-align: left;
}

.first-font {
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 28px;
  color: #999999;
  font-size: 16px;
}
.first-card-num {
  font-size: 20px;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 28px;
}
.total-num-font {
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 36px;
  letter-spacing: normal;
  color: #666666;
  font-size: 14px;
}
.total-summ-font {
  color: #f04844;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  text-transform: none;
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 36px;
  text-align: center;
  font-size: 28px;
}

.card_title {
  font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: left;
  line-height: 36px;
  font-size: 14px;
  letter-spacing: normal;
  color: #666666;
}
.site-content {
  margin-left: 8px;
  /* margin-top: 20px; */
  position: relative;
  /* padding: 60px 18px; */
}
.grid-content {
  height: 120px;
}
.img1 {
  width: 92px;
  height: 94px;
  margin-right: 45px;
}
.txt1 {
  line-height: 32px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
  text-align: center;
}
.txt1 span {
  font-size: 32px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3153c8;
  vertical-align: middle;
}
.sale {
  margin-left: 200px;
}
.sale li {
  list-style: none;
  display: inline-block;
  margin-left: 160px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666973;
}
.sale li span {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
  margin-left: 25px;
}
.el-col-6 {
  width: 47.83333%;
  height: 294px;
}
.grid-content1 {
  height: 220px;
  position: relative;
  top: 70px;
}
.grid-content1 img {
  width: 116px;
  height: 116px;
  position: relative;
  top: -80px;
}
.grid-content1 ul {
  position: relative;
  top: -80px;
}
.grid-content1 ul li {
  list-style: none;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #31333d;
}
.grid-content1 ul li span {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
  padding-left: 15px;
  padding-right: 5px;
}
.grid-content1 ul li p {
  display: inline-block;
  padding-left: 80px;
}
.grid-content1 ul li em {
  display: inline-block;
  width: 56px;
  font-style: normal;
}
.grid-content1 ul li p i {
  font-weight: bold;
  font-style: normal;
  padding-left: 8px;
}
.box h3 {
  margin-left: 25px;
  padding-left: 15px;
  border-left: 4px solid #38c58f;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
}
.box1 h3 {
  padding-left: 15px;
  border-left: 4px solid #f8bc43;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
}
.box2 {
  width: 60%;
}
.box3 {
  width: 35%;
}
.box2 h3,
.box3 h3 {
  border-left: 4px solid #3153c8;
}
.box3 ul li p {
  display: block;
}
.box2 .wrap {
  display: flex;
  justify-content: space-evenly;
}
.box .wrap div {
  width: 42%;
  height: 197px;
  background: #f7fafc;
  border-radius: 8px;
  padding: 10px 110px;
}
.box .wrap div.sbox1 {
  background: #fffafa;
}
.box .wrap div img {
  padding-right: 8px;
}
.box .wrap div h3 {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #31333d;
}
.box .wrap div p {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666973;
  padding-left: 48px;
}
.box .wrap div .h5 {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
  padding-left: 63px;
  margin-top: -7px;
}
.box .wrap div .num {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
}
.grid-content2 ul {
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  padding: 70px 0px;
}
.grid-content2 ul li{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #31333D;
}
.box3 ul i {
  display: block;
  font-style: normal;
  vertical-align: 10px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #31333d;
  padding-left: 25px;
}
.grid-content2 ul li p::before{
content: '';
    display: inline-block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    border: 2px solid #3E66EC;
    margin-right: 3px;
    vertical-align: middle;
}
.box3 ul .price i {
    padding-left:0px;
}
/* .el-card__body {
    padding: ;
} */
</style>


